Tengo una aplicación de una sola página escrita en React. La aplicación tiene varias páginas que se pueden mostrar cuando el usuario hace clic en las pestañas de la barra de navegación. Así que hay 2 diseños posibles:
Monte las páginas 1 a la vez; desmontar y volver a montar cada vez que el usuario cambie de página haciendo clic en la pestaña.
Monte todas las páginas simultáneamente y solo muestre la página seleccionada mientras configura el resto para display = "none" .
Preguntas:
Creo que esto no tiene nada que ver con las mejores prácticas o el rendimiento. Todo depende de lo que estés tratando de lograr.
Tenga en cuenta lo siguiente:
Montar / volver a montar siempre restablece el estado del componente y vuelve a ejecutar los ganchos useEffect (esto es algo realmente útil en el mundo de React). Esto significa que si usa, por ejemplo, un paso a paso y se mueve entre los pasos, digamos que llena algunos formularios, luego avanza y retrocede, sus componentes perderán su estado anterior y sus formularios se vaciarán (porque están montados nuevamente).
Pero, si usa display = none, el estado de sus componentes es persistente y sus formularios se llenarán con los valores anteriores. (Obviamente, puede lograr el mismo comportamiento con el primer enfoque, pero necesitará un poco de esfuerzo para hacerlo, un esfuerzo que le ahorrará algo de tiempo en un punto posterior)
No digo que uno sea mejor que el otro, pero hay algunas consideraciones serias que debes saber antes de elegir uno u otro.
(no use display=none a menos que esté interesado en algunos trucos css serios)